
<script>
export default {
  name: 'TheSearchForm',
  props: {
    loading: false,
    headerName: {
      type: String,
      default(){
        return this.$route && this.$route.name || '筛选'
      }
    },
    formModel: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    const query = {}
    this.formModel.forEach(item=>{
      query[item.params] = item.firstValue || ''
    })
    return {
      formQuery: query,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {
    onSubmit () {
      this.$emit('searchSubmit', this.formQuery)
    },
    resetForm () {
      const query = {}
      this.formModel.forEach(item=>{
        query[item.params] = ''
      })
      this.formQuery = query
      this.$emit('searchReset', this.formQuery)
    }
  },
  watch: {
    formQuery:{
      handler(nV,oV){
        this.$emit('searchReset', nV)
      },
      deep: true
    }
  },
  render (createElement, context) {
    // console.log('searchModel', this.formModel)
    return (<el-card class="box-card" shadow="never" header={this.headerName}>
      <el-form onInput={e=>e} inline model={this.formQuery} label-width="100px" label-suffix=":" size="small" style="margin-bottom: -18px;" props={{...this.$attrs}}>
      {
        this.formModel.map((item,index)=>{
          if (!item.type){
            item.type = 'input'
          }
          if (item.type === 'dateRange') {
            return (
              <el-form-item key={index} label={item.label}>
              <el-date-picker
                style="width: 400px;"
                vModel={this.formQuery[item.params]}
                props={{
                  name:['start_time','end_time'],
                    value:this.formQuery[item.params],
                    'value-format':"yyyy-MM-dd",
                    'unlink-panels':true,
                    'range-separator':"至",
                    'start-placeholder':"开始日期",
                    'end-placeholder':"结束日期",
                    type:"daterange",
                    'picker-options':this.pickerOptions
                }}
              >
              </el-date-picker>
            </el-form-item>
            )
          }

          if (item.type === 'input') {
            const {props={},on} = item
            return (
              <el-form-item key={index} label={item.label}>
              <el-input
                style={{width:item.width || ''}}
                vModel={this.formQuery[item.params]}
                placeholder={props.placeholder || '请输入'+item.label}
                nativeOnKeyup={e=>((e.keyCode===13)&&this.onSubmit())}
                clearable
                props={{...props}}
                on={{...on}}
                />
                </el-form-item>
              )
          }

          if (item.type === 'select') {
            const {props,on} = item
            return (
              <el-form-item key={index} label={item.label}>
              <el-select
                vModel={this.formQuery[item.params]}
                placeholder='请选择'
                style={{width:item.width || ''}}
                clearable
                props={{...props}}
                on={{...on}}
              >
                {
                  item.payload.options.map(info=>{
                    return <el-option
                    key={info.id}
                    label={info.name}
                    value={info.id}
                    />
                  })
                }
            </el-select>
            </el-form-item>
          )
          }
        })
      }
      <el-form-item style="display: inline-block">
        <el-button type="primary" icon="el-icon-search" onClick={this.onSubmit} loading={this.loading}>查询</el-button>
        <el-button onClick={this.resetForm} icon="el-icon-top-left">重置</el-button>
        {
          this.$slots.default
        }
      </el-form-item>
      </el-form>
      </el-card>)
  }
}
</script>
